<template>
    <div class="record list-wrapper">
        <el-dialog title="新建员工信息" :visible.sync="pop" size="tiny">
            <el-form :model="ruleForm" ref="popRulesName" :label-width="width" :rules="popRules">
                <el-form-item label="员工编号" prop="number">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.number" size="small" placeholder="请输入员工编号"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-col :span="span">
                        <el-input v-model="ruleForm.name" size="small" placeholder="请输入姓名"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="毕业院校">
                  <el-col :span="span">
                    <el-input v-model="ruleForm.school" size="small" placeholder="请输入毕业院校"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="学历">
                    <el-col :span="span">
                        <el-select v-model="ruleForm.education" clearable placeholder="请选择学历" size="small">
                          <el-option label="中专" value="中专"></el-option>
                          <el-option label="大专" value="大专"></el-option>
                          <el-option label="本科及以上" value="本科及以上"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>

                <el-form-item label="船上服务资历">
                    <el-col :span="span">
                        <el-select v-model="ruleForm.crewtype" size="small" clearable filterable>
                          <el-option v-for="item in crewList" :key="item.id" :label="item.type" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="pop = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
        <table class="list-table" border="0" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <th>
                    <span class="icon add" @click="openAddForm()"></span>
                </th>
                <th>员工编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>学历</th>
                <th>毕业院校</th>
                <th>船上服务资历(船型)</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>
                    <span class="icon del" @click="del(item.id)"></span>
                    <span class="icon det" @click="onDetail(item.id)"></span>
                </td>
                <td>{{item.number}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.education}}</td>
                <td>{{item.school}}</td>
                <td>{{item.crewtype}}</td>
            </tr>
            </tbody>
        </table>
        <div class="namtc-pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="10"
                         layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
    </div>
</template>

<script>
    const datas = {
        number: '',
        name: '',
        education: '',
        school: '',
        crewtype: '',
        type: ''
    };
    export default {
        data() {
            return {
                popShow: false,
                pop: false,
                page: 1,
                total: 0,
                width: '150px',
                span: 18,
                ruleForm: _g.cloneJson(datas),
                popRules: {
                    name: [{required: true, message: "请填写员工姓名", trigger: "blur"}],
                    number: [{required: true, message: "请填写员工编号", trigger: "blur"}],
                    type: [{required: true, message: "请选择聘用类型", trigger: "change,blur"}],
                },
                search: {
                    number: '',
                    name: '',
                    sex: [],
                    post: ''
                },
                list: [],
              crewList:[]
            }
        },

        created() {
            this.search = Lockr.get('staffSearch');
            this.fetchData()
          this.getCrewList()
        },

        methods: {
          getCrewList() {
            this.apiPost("System/crewLists").then(res => {
              this.crewList = res;
            });
          },
            fetchData() {
                let data = this.search;
                data.page = this.page;
                this.apiPost('Operation/staffLists', data).then((res) => {
                    this.list = res.list;
                    this.total = parseInt(res.total)
                })
            },
            handleCurrentChange(val) {
                this.page = val;
                this.fetchData()
            },

            onDetail(id) {
                router.push('/operate/manpower/listDetail/' + id)
            },
            openAddForm() {
                this.ruleForm = _g.cloneJson(datas);
                this.pop = true;
                setTimeout(() => {
                    this.$refs.popRulesName.resetFields();
                }, 0)
            },
            del(id) {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let data = {id: id};
                    this.apiPost('Operation/staffDelete', data).then(() => {
                        if (!res.error) {
                            this.$message({
                                type: "success",
                                message: res.msg
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            });
                        }
                    });
                    this.fetchData();
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                })
            },

            submit() {
                this.$refs.popRulesName.validate((valid) => {
                    if (valid) {
                        let data = this.ruleForm;
                        this.pop = false;
                        this.apiPost('Operation/staffAdd', data).then(res => {
                            let remind = res.error ? 'error' : 'success';
                            _g.toastMsg(remind, res.msg);
                            if (!res.error) {
                                this.fetchData()
                            } else {
                                this.pop = true
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .add {
        width: 25px;
        height: 25px;
        background: url(../../../img/add.png) no-repeat;
        background-size: 100%;
        cursor: pointer;
    }

    .record {
        background: #FFFFFF;
    }

    .det {
        background: url(../../../img/detail.png) no-repeat;
    }
</style>
